<template>
  <div class="drawerBottomLeftItem" v-if="pageflag">
    <Echart
      id="drawerBottomLeft"
      :options="option"
      class="drawer_bottom_right_inner"
      ref="charts"
    />
  </div>

  <Reacquire v-else @onclick="getData(sensorForm)" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { graphic } from "echarts";
export default {
  props: {},
  data() {
    return {
      sensorForm: {},
      option: {},
      pageflag: false,
      timer: null,
    };
  },
  created() {},
  computed: {},
  watch: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    getData(row) {
      if (row) {
        // this.$api.screen.getParamValueList(data).then((res) => {
        let res = {
          normalValueList: [],
          abnormalValueList: [],
        };
        // 时间序列数组
        // const timeArr = Array.from(new Array(144).keys()).map(function (val, idx) { return parseInt(val / 6).toString() + ':' + (idx % 6).toString() + '0' })
        // console.log('时间序列数组', timeArr)
        this.pageflag = true;
        this.$nextTick(() => {
          if (res.normalValueList.length > 0 || res.abnormalValueList > 0) {
            // 筛选时间
            const dataArr = res.normalValueList.map((item) =>
              this.$moment(item.time).format("HH:mm")
            );
            // 判断正常实时数值
            const normalValueList = res.normalValueList.map((item) => {
              if (
                res.normalValueList.filter((_item) => item.time === _item.time)
              ) {
                return res.normalValueList.filter(
                  (_item) => item.time === _item.time
                )[0].value;
              } else {
                return 0;
              }
            });
            // 判断异常实时数值
            const abnormalValueList = res.normalValueList.map((item) => {
              if (
                res.abnormalValueList.filter(
                  (_item) => item.time === _item.time
                ).length > 0
              ) {
                return res.abnormalValueList.filter(
                  (_item) => item.time === _item.time
                )[0].value;
              } else {
                return 0;
              }
            });
            this.init(dataArr, normalValueList, abnormalValueList);
          } else {
            // 时间序列数组
            const timeArr = Array.from(new Array(144).keys()).map(function (
              val,
              idx
            ) {
              return (
                parseInt(val / 6).toString() + ":" + (idx % 6).toString() + "0"
              );
            });
            // 正常实时数值
            const normalValueList = timeArr.map(() => {
              return 0;
            });
            // 异常实时数值
            const abnormalValueList = timeArr.map(() => {
              return 0;
            });
            this.$nextTick(() => {
              this.init(timeArr, normalValueList, abnormalValueList);
            });
          }
        });
      } else {
        this.pageflag = true;
        // 时间序列数组
        const timeArr = Array.from(new Array(144).keys()).map(function (
          val,
          idx
        ) {
          return (
            parseInt(val / 6).toString() + ":" + (idx % 6).toString() + "0"
          );
        });
        // 正常实时数值
        const normalValueList = timeArr.map(() => {
          return 0;
        });
        // 异常实时数值
        const abnormalValueList = timeArr.map(() => {
          return 0;
        });
        this.$nextTick(() => {
          this.init(timeArr, normalValueList, abnormalValueList);
        });
      }
    },
    init(xData, yData, yData2) {
      this.option = {
        color: ["#EFBA55 ", "#3778D1"],
        legend: {
          icon: "circle",
          textStyle: {
            color: "#ffffff",
          },
        },
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: false, // 不留白，从原点开始
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            // show:false,
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1, // 设置成1保证坐标轴分割刻度显示成整数。
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        grid: {
          // 布局
          x: 50,
          y: 50,
          x2: 30,
          y2: 30,
          // show: true,
          // left: '10px',
          // right: '30px',
          // bottom: '10px',
          // top: '38px',
          // containLabel: true,
          // borderColor: '#1F63A3'
        },
        series: [
          {
            data: yData,
            type: "line",
            smooth: true,
            symbol: "none", // 去除点
            name: "正常",
            color: "rgba(252,144,16,.7)",
            areaStyle: {
              // 右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(252,144,16,.7)",
                  },
                  {
                    offset: 1,
                    color: "rgba(252,144,16,.0)",
                  },
                ],
                false
              ),
            },
            markPoint: {
              data: [
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "rect",
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    // color: '#09CAF3',
                    backgroundColor: "rgba(252,144,16,0.1)",
                    borderRadius: 6,
                    padding: [7, 14],
                    borderWidth: 0.5,
                    borderColor: "rgba(252,144,16,.5)",
                    formatter: "正常：{c}",
                  },
                },
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "circle",
                  symbolSize: 6,
                  itemStyle: {
                    color: "#FC9010",
                    shadowColor: "#FC9010",
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: "",
                  },
                },
              ],
            },
          },
          {
            data: yData2,
            type: "line",
            smooth: true,
            symbol: "none", // 去除点
            name: "异常",
            color: "rgba(9,202,243,.7)",
            areaStyle: {
              // 右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(9,202,243,.7)",
                  },
                  {
                    offset: 1,
                    color: "rgba(9,202,243,.0)",
                  },
                ],
                false
              ),
            },
            markPoint: {
              data: [
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "rect",
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    // color: '#FC9010',
                    backgroundColor: "rgba(9,202,243,0.1)",

                    borderRadius: 6,
                    borderColor: "rgba(9,202,243,.5)",
                    padding: [7, 14],
                    formatter: "异常：{c}",
                    borderWidth: 0.5,
                  },
                },
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "circle",
                  symbolSize: 6,
                  itemStyle: {
                    color: "#09CAF3",
                    shadowColor: "#09CAF3",
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: "",
                  },
                },
              ],
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.drawerBottomLeftItem {
  height: 100%;
  #drawerBottomLeft {
    height: 100%;
  }
  .no-echart {
    text-align: center;
    color: #a3c3e5;
  }
}
.right_top_inner {
  margin-top: -8px;
}
</style>
